<!-- Author:Rain -->
<template>
    <!-- 这里是我要进行nextTick测试的地方 -->
    <p ref="refP">消息：{{ message }}</p>

    <div>
        <button @click="updateList">点击更新列表</button>
        <ul>
            <li v-for="item in list">{{ item }}</li>
        </ul>
    </div>
</template>

<script setup lang="ts">
/*
Vue的官方文档解释：
在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取到更新后的DOM
*/
/* 下面这里是一个较为简单的场景！！！ */
import {ref,nextTick} from "vue"
const message=ref("第一条消息")
const refP=ref(null)
console.log(refP.value);//这里没有用nextTick的时候是null

nextTick(()=>{
  console.log(refP.value);
})

/* 一个复杂的场景
我们什么时候需要用到nextTick？
有这样一个场景：你在项目中需要在修改了DOM元素的数据后，立即对新的DOM执行一系列JS操作时，这是就需要使用nextTick()方法。
通俗的理解是：更改数据后当你想立即使用JS操作新的视图的时候需要使用它。
*/
const list=ref(new Array(20).fill(0))
function updateList(){
  list.value.push(...new Array(10).fill(1))
  //比较下面这两段代码，我们发现没有nextTick的并没有滑到最后一个1那里
  // const liItem=document.querySelector('li:last-child')
  // liItem.scrollIntoView({behavior:'smooth'})
  nextTick(()=>{
    const liItem=document.querySelector('li:last-child')
    liItem.scrollIntoView({behavior:'smooth'})
  })
}
/* nextTick的使用原理 
nextTick()方法的使用原理涉及到vue.js中的异步更新队列以及JS的事件循环机制。
在vue中，当你修改了数据后，vue会将DOM更新放入一个队列中，并在适当的事时机异步执行这些更新。
这样做的好处是可以将多个数据变更合并成一次DOM更新，去掉重复数据造成不必要的计算以及DOM操作。
但是，这样也导致了一个问题：在数据更新后立即获取更新后的DOM或者对更新后的DOM进行操作时，可能会遇到更新尚未完成的情况。
这个时候，nextTick方法就派上用场了，它的原理是利用JS的事件循环机制，nextTick()方法会在当前JS执行栈执行完毕后立即执行
传入的回调函数，但在下一个事件循环时执行。这样就能确保回调函数在Vue实例更新DOM后再执行，从而获取更新后的DOM或进行相应的操作。
*/

</script>
